﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>状态动画与侦听器</title>
		
        <script src="../vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
        <script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>
<style>
    .example-7-color-preview {
        display: inline-block;
        width: 50px;
        height: 50px;
    }
</style>

    </head>
    <body class="docs">
    混入 — Vue.js<br />
    https://cn.vuejs.org/v2/guide/mixins.html<br />
    <div id="animated-number-demo">
        <input v-model.number="number" type="number" step="20">
        <p>{{ animatedNumber }}</p>

    <hr />

    <input
            v-model="colorQuery"
            v-on:keyup.enter="updateColor"
            placeholder="Enter a color"
    >
    <button v-on:click="updateColor">Update</button>
    <p>Preview:</p>
    <span
            v-bind:style="{ backgroundColor: tweenedCSSColor }"
            class="example-7-color-preview"
    ></span>
    <p>{{ tweenedCSSColor }}</p>

    </div>
    </body>
	
<script type="text/javascript">
    var Color = net.brehaut.Color;
    console.log(Color);
    new Vue({
        el: '#animated-number-demo',
        data: {
            number: 0,
            tweenedNumber: 0,
            colorQuery: '',
            color: {
                red: 0,
                green: 0,
                blue: 0,
                alpha: 1
            },
            tweenedColor: {}
        },
        created: function () {
            this.tweenedColor = Object.assign({}, this.color)
        },
        computed: {
            animatedNumber: function() {
                return this.tweenedNumber.toFixed(0);
            },
            tweenedCSSColor: function () {
                return new Color({
                    red: this.tweenedColor.red,
                    green: this.tweenedColor.green,
                    blue: this.tweenedColor.blue,
                    alpha: this.tweenedColor.alpha
                }).toCSS()
            }
        },
        watch: {
            number: function(newValue) {
                gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
            },
            color: function () {
                function animate () {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate)
                    }
                }

                new TWEEN.Tween(this.tweenedColor)
                    .to(this.color, 750)
                    .start()

                animate()
            }
        },
        methods: {
            updateColor: function () {
                this.color = new Color(this.colorQuery).toRGB()
                this.colorQuery = ''
            }
        }
    })
</script>
	
</html>
